<template>
	<div class="new-friend-item-container">

		<div v-for="(friendRequest,index) in sharedContactState.friendRequestList" :key="index"
			@click="showFriendRequest(friendRequest)">
			<view class="rq-hine" v-if="index > 0"></view>
			<view class="new-friend-item">
				<img class="avatar" :src="friendRequest._target.portrait">
				<div class="info">
					<div class="name">
						<span class="single-line rqname">{{ friendRequest._target.displayName }}</span>
						<p class="reason single-line">
							{{ friendRequest.reason ? friendRequest.reason : $t('friend_request.im') + friendRequest._target.displayName }}
							<span class="rqhuifu" v-if="friendRequest.status !== 1">回复</span>
						</p>
					</div>
					<span v-if="friendRequest.status === 0" class="jujue rqyy" @click="denied(friendRequest)">
						拒绝
					</span>
					<span v-if="friendRequest.status === 1" class="status rqyy">
						{{$t('friend_request.accepted')}}
					</span>
					<span v-else-if="friendRequest.status === 0" class="accept rqyy" @click="onaccept(friendRequest)">
						{{ $t('common.add') }}
					</span>
					<span v-else-if="friendRequest.status === 3" class="status rqyy">
						{{ $t('friend_request.denied') }}
					</span>
				</div>

			</view>
		</div>
	</div>

</template>

<script>
	import store from "../../store";
	import wfc from "../../wfc/client/wfc";
	import EventType from "../../wfc/client/wfcEvent";

	export default {
		name: "NewFriendListView",
		props: {
			newFriends: null,
		},
		data() {
			return {
				sharedContactState: store.state.contact,
				isActive: false,
				isaccept: false,
			};
		},
		methods: {
			showFriendRequest(friendRequest) {
				store.setCurrentFriendRequest(friendRequest);
				uni.navigateTo({
					url: '/pages/contact/FriendRequestDetailPage',
					success: () => {
						console.log('nav to FriendRequestDetailPage success');

					},
					fail: (err) => {
						console.log('nav to FriendRequestDetailPage err', err);
					}
				});
			},
			denied(friendRequest) {
				wfc.handleFriendRequest(friendRequest.target, false, "", () => {
					friendRequest.status = 3;
				}, (err) => {
					uni.showToast({
						title: '拒绝添加好友失败 ' + err,
						icon: 'none',
					});
					console.log('accept friend request error', err)
				})
			},
			onaccept(){
				
			},
			accept(friendRequest) {
				wfc.handleFriendRequest(friendRequest.target, true, "", () => {
					friendRequest.status = 1;
				}, (err) => {
					uni.showToast({
						title: '添加好友失败 ' + err,
						icon: 'none',
					});
					console.log('accept friend request error', err)
				})
			},
			onFriendRequestUpdate() {
				if (this.isActive) {
					wfc.clearUnreadFriendRequestStatus();
				}
			},
		},

		activated() {
			this.isActive = true;
			wfc.clearUnreadFriendRequestStatus();
		},

		deactivated() {
			this.isActive = false;
		},

		mounted() {
			this.isActive = true;
			wfc.clearUnreadFriendRequestStatus();
			wfc.eventEmitter.on(EventType.FriendRequestUpdate, this.onFriendRequestUpdate);
		},

		beforeUnmount() {
			this.isActive = false;
			wfc.eventEmitter.removeListener(EventType.FriendRequestUpdate, this.onFriendRequestUpdate);
		}
	}
</script>

<style lang="css" scoped>
	.rqyy {
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 12px;
		padding: 5px 10px;
		border-radius: 100px;
		background: #F5F5F5;
		display:inline-block;
		margin-left:5px;
	}


	.new-friend-item-container {
		padding-left: 10px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 8px;
	}

	.new-friend-item {
		display: flex;
		width: 100%;
		padding: 10px 10px 10px 0;
		align-items: center;
		font-size: 13px;
		position: relative;
	}

	.new-friend-item:active {
		background-color: #d6d6d6;
	}

	.new-friend-item .info {
		margin-left: 10px;
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.new-friend-item .info .name {
		flex: 1;
	}

	.new-friend-item .info .name .rqname {
		font-size: 16px;
	}

	.new-friend-item .info .accept {
		text-align: center;
		color: white;
		background: #4168e0;
		border: solid 1px #4168e0;
	}

	.new-friend-item .info .jujue {
		color: #000000;
	}
	.new-friend-item .info .status {
		color: #b2b2b2;
	}

	.new-friend-item .info .reason {
		font-size: 12px;
		color: #b2b2b2;
	}

	.new-friend-item .info .reason .rqhuifu {
		padding-left: 10px;
		display: inline-block;
		font-size: 12px;
		color: #386BF6;
	}
</style>